<template>
  <!--登录页面-->
  <div>
    <div class="login-box">
      <h2>疫点通</h2>
      <el-form :model="user" ref="user">
        <!--账号输入框 -->
        <el-form-item prop="account">
          <div class="user-box">
            <el-input
                type="text"
                v-model="user.account"
                @focus="userFocusEvent"
                @blur="userBlurEvent"
                clearable="true"
            ></el-input>
            <label :class="[{'restore_style': userChangeIndex == 0},{'float_style': userChangeIndex == 1}]">
              <i class="el-icon-user"></i>
            </label>
          </div>
        </el-form-item>
        <!--password输入框 -->
        <el-form-item prop="netPassword">
          <div class="user-box">
            <el-input
                type="password"
                v-model="user.netPassword"
                @focus="pwdFocusEvent"
                @blur="pwdBlurEvent"
                clearable="true"
            ></el-input>
            <label :class="[{'restore_style': pwdChangeIndex == 0},{'float_style': pwdChangeIndex == 1}]">
              <i class="el-icon-lock"></i>
            </label>
          </div>
        </el-form-item>
        <!--登录按钮-->
        <el-form-item>
          <el-button @click="handleSubmit('user')" style="right: 0px">立即登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>

import {login} from "@/api/admin_api";
import {setToken} from "@/utils/Token";

export default {
  name: "Login",
  components: {
  },
  data() {
    return {
      /*展示不同样式*/
      userChangeIndex:0,
      pwdChangeIndex:0,
      /*登录对应的信息*/
      user: {
        account:'',
        netPassword:''
      },
    }
  },
  methods: {
// 用户名输入框获取焦点事件
    userFocusEvent(){
      this.userChangeIndex = 1;
    },
    //用户名失去焦点事件
    userBlurEvent(){
      if (this.user.account.trim() ===''){
        this.userChangeIndex = 0;
      }else {
        this.userChangeIndex = 1;
      }

    },
// 密码框获取焦点事件
    pwdFocusEvent(){
      this.pwdChangeIndex = 1;
    },
// 密码框失去焦点事件
    pwdBlurEvent(){
      if (this.user.netPassword ===''){
        this.pwdChangeIndex = 0;
      }else {
        this.pwdChangeIndex = 1;
      }
    },

    /*登录*/
    handleSubmit(user) {

      login(this.user).then((res) =>{
          if (res.data.state === 200){
            // 保存token
            setToken('token',res.data.data);
            this.$message({
                message:'登录成功!',
                type:'success'
            })
            this.$router.push("/admin")
          }else {
            this.$message({
              message:res.data.message,
              type:'error'
            })
          }
      })
    },

  },


  /*当页面创建时添加背景*/
  beforeCreate() {
    document.querySelector('body').classList.add("loginBgc");
  },
  /*当页面销毁时删除背景*/
  beforeDestroy() {
    document.querySelector('body').classList.remove("loginBgc");
  }
};


</script>

<style>
/*背景图片*/
.loginBgc{
  background-image: url("../assets/login2.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0px -50px;
  margin: 0px;
}



/*登录样式一*/
.login-box {
  position: absolute;
  /*让盒子居中*/
  top: 40%;
  left: 80%;
  width: 400px;
  padding: 40px;
  /*让盒子向左向右偏移一半使其位于中心*/
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.3);
  /*padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在内容中*/
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
  border-radius: 10px;
}
/*登录样式二*/
.login-box h2 {
  margin: 0 0 30px;
  padding: 0;
  font-size: 30px;
  color: #fff;
  text-align: center;
}

.login-box .user-box {
  position: relative;
}

/*输入框样式*/
.login-box .user-box .el-input__inner{
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  /*margin-bottom: 30px;*/
  border: none;
  border-bottom: 2px solid #fff;
  /*点击时的边框透明*/
  outline: none;
  /*设置背景透明*/
  background: transparent;
}

/*登录框提示图标原始样式*/
.login-box .user-box .restore_style {
  position: absolute;
  top: -5px;
  left: 0;
  padding: 10px 0;
  font-size: 20px;
  color: #fff;
  transition: 0.5s;
}

/*登录框输入时样式*/
.login-box .user-box .float_style {
  position: absolute;
  top: -20px !important;
  left: 0;
  color: #03e9f4;
  font-size: 12px;
  transition: 0.3s;
}

/*按钮样式*/
.login-box form .el-button {
  position: relative;
  padding: 10px 20px;
  color: #03e9f4;
  font-size: 16px;
  /*去下划线*/
  text-decoration: none;
  /*点击按钮时的延时效果*/
  transition:0.5s;
  margin-top: 40px;
  background: transparent;
  border: none;
}

/*点击按钮样式*/
.login-box .el-button:hover{
  background: #03e9f4;
  color: #fff;
  border-radius: 5px;
  /*设置按钮的阴影*/
  box-shadow: 0 0 5px #03e9f4,
  0 0 25px #03e9f4,
  0 0 50px #03e9f4,
  0 0 100px #03e9f4;
}

</style>